<template>
	<view class="container">
		<view class="tabs">
			<view class="tab" :class="{ active: activeTab === 'login' }" @click="activeTab = 'login'">登录</view>
			<view class="tab" :class="{ active: activeTab === 'register' }" @click="activeTab = 'register'">注册</view>
		</view>
		
		<!-- 登录表单 -->
		<view class="form" v-if="activeTab === 'login'">
			<view class="input-group">
				<view class="input-item">
					<text class="iconfont icon-phone"></text>
					<input 
						type="text" 
						v-model="loginForm.username" 
						placeholder="手机号/邮箱" 
						placeholder-class="placeholder"
					/>
				</view>
				<view class="input-item">
					<text class="iconfont icon-lock"></text>
					<input 
						:type="showLoginPwd ? 'text' : 'password'"
						v-model="loginForm.password" 
						placeholder="密码" 
						placeholder-class="placeholder"
					/>
					<text class="show-pwd iconfont icon-eye" @click="showLoginPwd = !showLoginPwd"></text>
				</view>
			</view>
			
			<view class="options">
				<label class="remember">
					<checkbox :checked="loginForm.remember" @change="onRememberChange" />
					<text>记住我</text>
				</label>
				<text class="forget-pwd">忘记密码?</text>
			</view>
			
			<button class="login-btn" hover-class="btn-hover" @click="handleLogin">
				登录
			</button>
			
		</view>
		
		<!-- 注册表单 -->
		<view class="form" v-else>
			<view class="input-group">
				<view class="input-item">
					<text class="iconfont icon-user"></text>
					<input 
						type="text" 
						v-model="registerForm.username" 
						placeholder="请输入用户名" 
						placeholder-class="placeholder"
					/>
				</view>
				<view class="input-item">
					<text class="iconfont icon-lock"></text>
					<input 
						:type="showRegPwd ? 'text' : 'password'"
						v-model="registerForm.password" 
						placeholder="请设置密码" 
						placeholder-class="placeholder"
					/>
					<text class="show-pwd iconfont icon-eye" @click="showRegPwd = !showRegPwd"></text>
				</view>
				<view class="input-item">
					<text class="iconfont icon-lock"></text>
					<input 
						:type="showRegPwd ? 'text' : 'password'"
						v-model="registerForm.confirmPassword" 
						placeholder="请确认密码" 
						placeholder-class="placeholder"
					/>
					<text class="show-pwd iconfont icon-eye" @click="showRegPwd = !showRegPwd"></text>
				</view>
			</view>
			
			<button class="login-btn" hover-class="btn-hover" @click="handleRegister">
				立即注册
			</button>
		</view>
		
		<!-- 底部协议 -->
		<view class="agreement">
			<text class="agreement-text">继续即同意</text>
			<text class="link">《用户协议》</text>
			<text class="agreement-text">与</text>
			<text class="link">《隐私政策》</text>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'

const activeTab = ref('login')
const showLoginPwd = ref(false)
const showRegPwd = ref(false)

const loginForm = reactive({
	username: '',
	password: '',
	remember: false
})

const registerForm = reactive({
	username: '',
	password: '',
	confirmPassword: ''
})

const onRememberChange = (e) => {
	loginForm.remember = e.detail.value
}

const handleLogin = async () => {
	try {
		const res = await uni.request({
			url: 'http://localhost:8080/user/login',
			method: 'POST',
			data: {
				username: loginForm.username,
				password: loginForm.password
			}
		});
		
		if (res.data.code === 200) {
			// 保存用户信息
			uni.setStorageSync('userInfo', res.data.data);
			uni.setStorageSync('isLoggedIn', true);
			
			// 跳转到首页
			uni.switchTab({
				url: '/pages/hot/hot'
			});
		} else {
			uni.showToast({
				title: res.data.message,
				icon: 'none'
			});
		}
	} catch (e) {
		uni.showToast({
			title: '登录失败',
			icon: 'none'
		});
	}
}

const handleRegister = async () => {
	if (!registerForm.username) {
		uni.showToast({
			title: '请输入用户名',
			icon: 'none'
		})
		return
	}
	if (!registerForm.password) {
		uni.showToast({
			title: '请设置密码',
			icon: 'none'
		})
		return
	}
	if (registerForm.password !== registerForm.confirmPassword) {
		uni.showToast({
			title: '两次密码输入不一致',
			icon: 'none'
		})
		return
	}
	
	try {
		const res = await uni.request({
			url: 'http://localhost:8080/user/register',
			method: 'POST',
			data: {
				username: registerForm.username,
				password: registerForm.password
			}
		});
		
		if (res.data.code === 200) {
			uni.showToast({
				title: '注册成功',
				icon: 'success'
			});
			// 清空表单
			registerForm.username = '';
			registerForm.password = '';
			registerForm.confirmPassword = '';
			// 切换到登录页
			activeTab.value = 'login';
		} else {
			uni.showToast({
				title: res.data.message,
				icon: 'none'
			});
		}
	} catch (e) {
		uni.showToast({
			title: '注册失败',
			icon: 'none'
		});
	}
}
</script>

<style>
page {
	background: #fff;
}

.container {
	padding: 0 40rpx;
}

.tabs {
	display: flex;
	margin-top: 40rpx;
	position: relative;
}

.tab {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	color: #999;
	padding: 20rpx 0;
	position: relative;
}

.tab.active {
	color: #0066ff;
	font-weight: 500;
}

.tab.active::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 40rpx;
	height: 4rpx;
	background: #0066ff;
	transform: translateX(-50%);
}

.form {
	margin-top: 60rpx;
}

.input-group {
	margin-bottom: 40rpx;
}

.input-item {
	display: flex;
	align-items: center;
	border: 2rpx solid #e5e5e5;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 30rpx;
}

.verify-code {
	position: relative;
}

.send-code {
	position: absolute;
	right: 24rpx;
	color: #0066ff;
	font-size: 26rpx;
}

.input-item .iconfont {
	font-size: 40rpx;
	color: #999;
	margin-right: 20rpx;
}

.input-item input {
	flex: 1;
	font-size: 28rpx;
}

.show-pwd {
	color: #999;
}

.options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.remember {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	color: #666;
}

.remember checkbox {
	transform: scale(0.7);
	margin-right: 8rpx;
}

.forget-pwd {
	font-size: 26rpx;
	color: #0066ff;
}

.login-btn {
	width: 100%;
	background: #0066ff;
	color: #fff;
	font-size: 32rpx;
	padding: 24rpx 0;
	border-radius: 12rpx;
	margin-bottom: 50rpx;
	font-weight: normal;
}

.btn-hover {
	opacity: 0.9;
}

.quick-login {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 50rpx;
}

.quick-login .line {
	width: 100rpx;
	height: 2rpx;
	background: #e5e5e5;
}

.quick-login text {
	color: #999;
	font-size: 24rpx;
	margin: 0 20rpx;
}

.third-party {
	display: flex;
	justify-content: center;
	margin-bottom: 50rpx;
}

.third-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 40rpx;
}

.third-item image {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 16rpx;
}

.third-item text {
	font-size: 24rpx;
	color: #666;
}

.visitor-login {
	text-align: center;
	margin-bottom: 40rpx;
}

.visitor-login text {
	font-size: 28rpx;
	color: #666;
	padding: 20rpx 40rpx;
	background: #f5f5f5;
	border-radius: 100rpx;
}

.agreement {
	text-align: center;
	font-size: 24rpx;
	margin-top: 40rpx;
}

.agreement-text {
	color: #999;
}

.link {
	color: #0066ff;
}
</style> 